<template>
  <div id="app">
    <div class="app-page">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </div>
</template>
<script>

  export default {
    name: 'app',
    data() {
      return {};
    },

    computed: {},

    methods: {},

    created() {
    },

    components: {
    }
  };

</script>
<style lang="scss">
  @import './assets/scss/function';
  @import './assets/scss/partials/reset';

  // .mint-indicator-wrapper,
  // .mint-indicator-mask {
  //   z-index: $zIndexOverlay;
  // }
  .mint-indicator {
    position: relative;
    z-index: $zIndexOverlay;
  }

  body {
    max-width: $bodyWidth;
    margin: 0 auto;
    background-color: $bodyBg;
  }

  #app {
    font-size: 28px;
  }

  .btn_primary{
    background-color: $primary;
    color: #fff;
    display: inline-block;
    padding: 15px 25px;
    border-radius: 10px;
    font-size: 35px;
  }
  .btn_disabled{
    background-color: #bbb;
  }
  .red_color{
    color: $red;
  }
  .mask{
    max-width: $bodyWidth;
    left: 50%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transform: translateX(-50%);
    z-index: 999;
  }
  .mint-toast {
    padding:0px;
    border-radius:4px;
  }
  .mint-toast-text {
    margin:10px 25px;
    font-size:62px;
  }
  .van-picker,.van-popup {
    border-radius: 20px 20px 0 0;
  }
  .van-picker__toolbar {
    .van-picker__title {
      color: #999;
      font-weight: normal;
    }
    .van-picker__confirm {
      color: $btnBg;
    }
    .van-picker__cancel {
      color: #333;
    }
  }
  .van-toast {
    /*color: #01D0B2;*/
    /*background-color: #FFFFFF;*/
  }
  .product-table-header {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      top: -5px;
      left: -16px;
      right: -16px;
      transform: translateY(-60%);
      height: 20px;
      background: #EC595840;
      border-radius: 10px;
    }
    &::after {
      content: '';
      position: absolute;
      top: -8px;
      left: 0;
      right: 0;
      height: 6px;
      background: #EC5958;
      border-radius: 10px 10px 0 0;
      z-index: 3;
    }
  }
  .product-table-bottom {
    position: relative;
    width: 100%;
    top: -1px;
    height: 96px;
    background: url("~@/assets/imgs/product_bottom.png");
    background-size: 100% 100%;
    &::after {
      content: '';
      position: absolute;
      left: 28px;
      right: 28px;
      top: 16px;
      height: 1px;
      background-image: url(~@/assets/imgs/dash.png);
      background-size: 100% 100%;
    }
  }
</style>
